<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
    <title>网络测速</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="favicon.ico">
    <script type="text/javascript" src="speedtest.js"></script>
    <script type="text/javascript">
        //INITIALIZE SPEEDTEST
        var s = new Speedtest(); //create speedtest object
        var xhr = new XMLHttpRequest();
        var url_report = './backend/report.php';
        var milestone = 0;
        var key_prefix = Date.parse(new Date());
        s.onupdate = function(data) { //callback to update data in UI
            I("ip").textContent = data.clientIp;
            I("dlText").textContent = (data.testState == 1 && data.dlStatus == 0) ? "..." : data.dlStatus;
            I("ulText").textContent = (data.testState == 3 && data.ulStatus == 0) ? "..." : data.ulStatus;
            I("pingText").textContent = data.pingStatus;
            I("jitText").textContent = data.jitterStatus;
            var prog = (Number(data.dlProgress) * 2 + Number(data.ulProgress) * 2 + Number(data.pingProgress)) / 5;
            I("progress").style.width = (100 * prog) + "%";
            var ipIspArr = I("ip").textContent.split(' - ', 3);
            var ip = ipIspArr[0];
            var isp = ipIspArr[1];
            var addr = ipIspArr[2] === undefined ? '' : ipIspArr[2];
            var progress = Math.floor(100 * prog);
            var key = key_prefix + "_" + ip;
            if (progress > 20 && (progress % 10 == 0) && progress != milestone) {
                console.log(progress);
                var params = 'key=' + key + '&ip=' + ip + '&isp=' + isp + '&addr=' + addr + '&dspeed=' + I("dlText").textContent + '&uspeed=' + I("ulText").textContent + '&ping=' + I("pingText").textContent +
                    '&jitter=' + I("jitText").textContent;
                xhr.timeout = 3000;
                xhr.ontimeout = function(e) {
                    console.log('上报超时');
                };
                xhr.open('POST', url_report, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(params);
                milestone = progress;
            }
        }
        s.onend = function(aborted) { //callback for test ended/aborted
            I("startStopBtn").className = ""; //show start button again
            if (aborted) { //if the test was aborted, clear the UI and prepare for new test
                initUI();
            }
        }

        function startStop() { //start/stop button pressed
            if (s.getState() == 3) {
                //speedtest is running, abort
                s.abort();
            } else {
                //test is not running, begin
                s.start();
                I("startStopBtn").className = "running";
            }
        }

        //function to (re)initialize UI
        function initUI() {
            I("dlText").textContent = "";
            I("ulText").textContent = "";
            I("pingText").textContent = "";
            I("jitText").textContent = "";
            I("ip").textContent = "";
        }

        function I(id) {
            return document.getElementById(id);
        }
    </script>
</head>

<body>
    <h1>欢迎使用网络测速平台</h1>
    <div id="startStopBtn" onclick="startStop()"></div>
    <div id="test">
        <div id="progressBar">
            <div id="progress"></div>
        </div>
        <div class="testGroup">
            <div class="testArea">
                <div class="testName">下载速度</div>
                <div id="dlText" class="meterText"></div>
                <div class="unit">Mbps</div>
            </div>
            <div class="testArea">
                <div class="testName">上传速度</div>
                <div id="ulText" class="meterText"></div>
                <div class="unit">Mbps</div>
            </div>
        </div>
        <div class="testGroup">
            <div class="testArea">
                <div class="testName">平均延迟</div>
                <div id="pingText" class="meterText"></div>
                <div class="unit">ms</div>
            </div>
            <div class="testArea">
                <div class="testName">平均抖动</div>
                <div id="jitText" class="meterText"></div>
                <div class="unit">ms</div>
            </div>
        </div>
        <div id="ipArea">
            您的IP地址: <span id="ip"></span>
        </div>
        <h4>网络延迟、抖动标准</h4>
        <table border="1">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>语音通话</th>
                    <th>普通</th>
                    <th>电信级</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>延迟</td>
                    <td>&lt;200ms</td>
                    <td>&lt;30ms</td>
                    <td>&lt;5ms</td>
                </tr>
                <tr>
                    <td>抖动</td>
                    <td>&lt;40ms</td>
                    <td>&lt;20-30ms</td>
                    <td>&lt;1ms</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h4><a href="./results.html" target="_blank">查看测速记录</a></h4>
    <p><a href="https://github.com/BadApple9/speedtest-x" target="_blank">speedtest-x</a></p>
    <script type="text/javascript">
        initUI();
    </script>
</body>

</html>